
import { Typography, List, Checkbox} from 'antd'
import useGetCategories from '../../helpers/categories'
const {Title} = Typography

function FilterByCategory ({handelFilter}) {
    const categories = useGetCategories()
    const handleOnChange = value => {
        handelFilter(value)
    }
    return (
        <>
            <Title level={5}>按照分类筛选</Title>
            <Checkbox.Group onChange={handleOnChange}>
            <List
                dataSource={categories}
                renderItem={item => (
                    <List.Item>
                        <Checkbox value={item._id}>
                        {item.name}
                        </Checkbox>
                    </List.Item>
                )}
            />
            </Checkbox.Group>
            
        </>
    )
}
export default FilterByCategory